<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Style for drawing
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.lineWidth = 2.5; // Make lines thick like the original hand-drawn image

// Arrow drawing function for axes (V-shaped head)
function drawAxisArrow(ctx, fromx, fromy, tox, toy) {
    var headlen = 15;
    var dx = tox - fromx;
    var dy = toy - fromy;
    var angle = Math.atan2(dy, dx);
    ctx.beginPath();
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 8), toy - headlen * Math.sin(angle - Math.PI / 8));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 8), toy - headlen * Math.sin(angle + Math.PI / 8));
    ctx.stroke();
}

// Arrow drawing function for current vectors (filled head, thinner shaft)
function drawCurrentArrow(ctx, fromx, fromy, tox, toy) {
    var headlen = 12;
    var dx = tox - fromx;
    var dy = toy - fromy;
    var angle = Math.atan2(dy, dx);
    
    // Thinner shaft for current arrows
    ctx.save();
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.stroke();
    ctx.restore();
    
    // Filled arrowhead
    ctx.beginPath();
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    ctx.closePath();
    ctx.fill();
}

// Coordinate system setup
var originX = 150;
var originY = 250;

// Draw Axes
ctx.font = "bold 20px sans-serif";
ctx.textAlign = "center";

// z-axis (UP)
drawAxisArrow(ctx, originX, originY, originX, 50);
ctx.fillText("UP (z)", originX, 35);

// x-axis (East)
drawAxisArrow(ctx, originX, originY, 400, originY);
ctx.textAlign = "left";
ctx.fillText("East (x)", 410, originY + 5);

// y-axis (North)
var yAxisX = originX + 200;
var yAxisY = originY - 100;
drawAxisArrow(ctx, originX, originY, yAxisX, yAxisY);
ctx.fillText("North (y)", yAxisX + 10, yAxisY);

// Draw origin label
ctx.textAlign = "right";
ctx.font = "20px sans-serif";
ctx.fillText("0", originX - 10, originY + 5);

// Draw Current Arrows
// The starting points of the arrows lie on the y-axis line.
// The direction vector of the y-axis in the 2D drawing is:
var yVecX = yAxisX - originX; // 200
var yVecY = yAxisY - originY; // -100

// We place 7 arrows at different positions (t) along the y-axis.
// t=0 is the origin, t>0 is North, t<0 is South.
// The lengths are varied slightly to match the hand-drawn feel.
const yPositionsT = [-0.15, -0.07, 0, 0.15, 0.30, 0.45, 0.60];
const arrowLengths = [90, 100, 130, 100, 100, 100, 100];

yPositionsT.forEach((t, i) => {
    let startX = originX + t * yVecX;
    let startY = originY + t * yVecY;
    let len = arrowLengths[i];
    drawCurrentArrow(ctx, startX, startY, startX + len, startY);
});

// Draw lambda symbol
ctx.font = "italic bold 24px serif";
ctx.textAlign = "center";
ctx.fillText("λ", 280, 215);

// Draw Figure caption
ctx.font = "20px sans-serif";
ctx.fillText("Fig. 2.50", 250, 380);

</script>
</body>
</html>